<template>
	<view>
		<u-toast ref="uToast" />
		<map
			id="map"
			ref="map"
			:style="'width: ' + width + '; height: ' + height + ';'"
			subkey="O56BZ-JO43V-45LPE-UBUCQ-ZBZWF-5UBYW"
			:layer-style="nightindex?3:2"
			:scale="map.scale"
			show-location
			:latitude="map.latitude"
			:longitude="map.longitude"
			:markers="list"
			@markertap="de"
		/>
		<cover-image
			:src="pics.refash"
			class="refash"
			@click="getLists(activeIndex,'刷新成功')"
			v-if="!showDialog"
		/>
		<cover-image
			:src="pics.changeNight"
			class="changeNight"
			@click="changeNight()"
			v-if="!showDialog"
		/>
		<cover-image
			:src="pics.see"
			@click="funcIndex=!funcIndex"
			class="change"
			v-if="!showDialog"
		/>

		<cover-view class="func">
			<cover-image
				:src="activeIndex===2?pics.activeempety:pics.funsimple"
				@click="getLists(2,'切换精简模式')"
				v-if="funcIndex&&!showDialog"
			>
				所有
			</cover-image>
			<cover-image
				:src="activeIndex===1?pics.activesingle:pics.funAll"
				@click="getLists(1,'切换显示可充电')"
				v-if="funcIndex&&!showDialog"
			/>
			<cover-image
				:src="activeIndex===0?pics.activeAll:pics.funsingle"
				@click="getLists(0,'切换显示所有')"
				v-if="funcIndex&&!showDialog"
			/>
		</cover-view>
		<cover-image
			v-if="!showDialog"
			:src="pics.location"
			@click="returnMy()"
			class="change2"
		/>
		<!-- 弹窗 -->
		<u-popup
			:show="showDialog"
			closeOnClickOverlay
			closeable
			@close="showDialog=false"
			mode="bottom"
			length="27%"
			border-radius="40"
			:bgColor="nightindex?'#1E1E1EFF':'#FFFFFFFF'"
		>
			<view
				class="mage"
				style="display: flex;"
			>
				<view
					class="box"
					style="display: flex;"
				>
					<image
						:src="pics.chargemap"
						style="margin-top: 30rpx;"
					/><text
						class="label"
						style="margin-left:150rpx;margin-top: 20rpx;"
					>
						可用:<text class="value">{{purpData.num}}</text><text>/{{purpData.allNum}}</text>
					</text>
				</view>
			</view>
			<view
				class="mage"
				style="display: flex;"
			>
				<view class="box">
					<image :src="pics.changeLocation" /><text
						class="label2"
						style="margin-left:150rpx;margin-top: 20rpx;"
					>
						{{purpData.describe}}
					</text>
				</view>
			</view>
			<view
				class="mage"
				style="display: flex;"
			>
				<view class="box">
					<image :src="pics.fouce" /><text style="font-size: 30rpx;margin-left:150rpx;margin-top:20rpx;">关注：有<text class="value">{{purpData.concernedNum}}</text>人关注</text><br>
				</view>
			</view>
			<!--<image :src="pics.my" class="my" >  </image>-->
		</u-popup>
	</view>
</template>

<script>

import { getToken } from '@/store/user.js'
import { locatiosIcon, pic } from '@/assets/js/pic.js'

import { plugsByCom, emptyPlugByCom, streamlinePlugsByCom,
  PlugsByid, NumSub, NumSubdec } from '@/api/plugs.js'
import { userinfo } from '@/api/api_userInfo.js'
import { setUserInfo } from '@/store/user.js'
let map
// 用户的校区编号

let count

let compusId

export default {
  props: {
    token: {
      type: String
    }
  },
  data() {
    return {
      pics: pic[ '2' ],
      height: '550px',
      width: '500px',
      showDialog: false,
      // 被点击的点的LocationId
      locationId: '',
      localIndex: 0,
      // 弹出框内的数据
      equiementList: [],
      map: {
        scale: 16,
        latitude: 30.2258112,
        longitude: 120.0392194
      },
      // 我的定位
      covers: [{
        latitude: 30.2258112423327,
        longitude: 120.03921943891008,
      }],
      list: [],
      load: true,
      num: 60,
      show: false,
      allNum: 10,
      // 弹出框展示的数据
      purpData: {},
      funcIndex: false,
      current: 0,
      activeIndex: 2,
      // 黑夜模式与白天的转换
      nightindex: false,

    }
  },
  onShow() {
    this.getSetting()
  },
  watch: {
    showDialog(val) {
      if (val) {
        NumSub({ code: this.locationId }).then(res => {
        })
      } else {
        NumSubdec({ code: this.locationId }).then(res => {
        })
      }
    },

  },
  async created() {
	  // 获取用户信息
    // 创建地图上下文

    map = uni.createMapContext('map', this)
    uni.getSystemInfo({
      success: res => {
        this.height = res.windowHeight + 'px'
        this.width = res.windowWidth + 'px'
      }
    })
    this.location()
    setTimeout(this.getLists(0, '渲染成功'), 0)
  },
  methods: {
    updated() {
      console.log('渲染成功')
    },
    showToast(params) {
      this.$refs.uToast.show({
        type: 'success',
        title: params,
        message: params,
        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
      })
    },
    async getLists(index, params) {

      const userin = (await userinfo(getToken())).data

      // console.log('用户信息', userin)
      setUserInfo(userin)
      compusId = userin.campus
      let res

      count++
      this.activeIndex = index
      if (index === 0) { // 获取所有的位置
				 res = await plugsByCom({ campus: userin.campus })
      } else if (index === 1) { // 获取可充电的位置
				 res = await emptyPlugByCom({ campus: userin.campus })
      } else { // 获取极简模式下的数据
				 res = await streamlinePlugsByCom({ campus: userin.campus })
      }
      if (index === 2) {
        this.list = res.map((item, index) => {
          let count = 0

          if (item.num == 0) {
            count = 0
          } else {
            count = Math.ceil(item.num * 5 / item.allNum)

          }

          return ({ 'id': index + 1,
            'iconPath': locatiosIcon[ count ],
            'latitude': item.latitude,
            'longitude': item.longitude,
            'width': 25,
            'height': 25,
            'num': item.num,
            'concernedNum': item.concernedNum,
            'describe': item.describe,
            'allNum': item.allNum
          })
        })

      } else {
        this.list = res.map(item => {
          let count = 0

          if (item.num == 0) {
            count = 0
          } else {
						 count = Math.ceil(item.num * 5 / item.allNum)

          }
          return ({ 'id': parseInt(item.code),
            'iconPath': locatiosIcon[ count ],
            'latitude': item.latitude,
            'longitude': item.longitude,
            'width': 30,
            'height': 30
          })
        })
      }
      this.showToast(params)
    },
    changeNight() {
      this.nightindex = !this.nightindex
      if (this.nightindex) {
        this.pics = pic[ '3' ]
      } else {
        this.pics = pic[ '2' ]
      }

    },
    getSetting() {
      uni.getSetting({
				  success(res) {
					 console.log(res)
          if (res.authSetting[ 'scope.userLocation' ]) {
            this.location()
          }
				  }
      })
    },
    // 定位当前
    location() {
      uni.getLocation({
        type: 'gcj02',
				 isHighAccuracy: true,
        success: res => {
          this.getLists(0, '渲染成功')
          // console.log('地址获取成功,切换到目标点nvue', res);
          this.covers = {
            longitude: res.longitude,
            latitude: res.latitude,
          }
          map.moveToLocation({
            latitude: res.latitude,
            longitude: res.longitude
          })
        },
        fail: () => {
          this.getAuthorize()
          console.log('地理位置获取失败')
        }
      })
    },
    // 用户授权
    getAuthorize() {
      uni.authorize({
        scope: 'scope.userLocation',
        success(res) {
          this.location()
        },
        // 授权失败
        fail(err) {
          uni.showModal({
            title: '提示',
            content: '请授权位置获取!',
            showCancel: false,
            confirmText: '确认授权',
            success() {
              uni.openSetting({
                success(res) {
                  console.log(res)
                },
                fail(err) {
                  console.log(err)
                }
              })
            }
          })
        }
      })
    },
    async de(item) {

      if (item.markerId < 200) {
        const id = parseInt(item.markerId)

        this.purpData = this.list[ item.markerId - 1 ]
        console.log(this.purpDate)
        this.showDialog = true
      } else {
        this.locationId = '00' + item.markerId
        this.showDialog = true

        const res = await PlugsByid({ code: this.locationId })

        this.purpData = res
      }

    },
    returnMy() {
      map.moveToLocation({
        latitude: this.covers.latitude,
        longitude: this.covers.longitude
      })
    }
  },
}
</script>
<style lang="scss">

		.refash{
			position:fixed;
			left: 20rpx;
			bottom:160rpx;
			height: 90rpx;
			width: 90rpx;
		}
		.changeNight{
			position:fixed;
			left: 20rpx;
			bottom:280rpx;
			height: 90rpx;
			width: 90rpx;
		}

	.change{
		border-radius: 10rpx;
		position:fixed;

		right: 20rpx;
		bottom:280rpx;
		height: 90rpx;
		width:90rpx;
	}
	.change2{
		right: 20rpx;
		bottom:160rpx;
		position:fixed;

		height: 90rpx;
		width:90rpx;
	}
	.func{
		right: 110rpx;
		bottom:280rpx;
		border-radius: 20rpx;
		display: flex;
		position:fixed;
		cover-image{

			height: 90rpx;
			width: 90rpx;
		}
	}
	.u-popup{
		background: #f4f4f4;
	}
	.mage{
		background: #ffffff;
		position: relative;
		margin-top: 20rpx;
		image{
			position: absolute;
			width: 80rpx;
			height: 80rpx;
      margin-left: 50rpx;
		}
		.box{
			font-size: 40rpx;
			margin-left: 50rpx;
		}
		.value{
			color: #137EFF;
		}
		.label2{
			font-size: 35rpx;
			color:#666666 ;
		}

	}
	.buttonTab{
		height:200rpx ;
	}
	.my{
		float: right;width:160rpx;height: 160rpx;
		margin-top: -280rpx;
		margin-right:80rpx;
	}

</style>

